<template>
    <div style="height:100%;width:100%;" class="detail">
        <search right-label="搜索" @on-back="$router.back()" @on-right-click="handleIC" placeholder="卡号/手机号/姓名/单位"
                class="search search-ic">
        </search>
        <tab style="height: 45px">
            <tab-item @on-item-click="tabIndex = 1" selected>IC卡</tab-item>
            <tab-item @on-item-click="tabIndex = 2">加油机</tab-item>
        </tab>
        <scroll v-show="tabIndex === 1" :pulldown="pulldown" ref="myScroller" style="height: calc(100% - 90px)"
                :total="total"
                @on-infinite="getData">
            <div class="youba-list vux-tap-active" v-for="(item, index) in searchCardList" :key="index"
                 @click="$router.push({path:path, query:{cardId: item.cardId}})">
                <div class="detail-box-name"
                     :style="{backgroundColor: $util.getColor(item.color)}">
                    {{item.userName && item.userName.substring(0, 1)}}
                </div>
                <div style="margin-left: 10px; flex:1">
                    <div class="detail-left-time">{{item.cardId}}</div>
                    <div>{{item.userName}}</div>
                </div>
                <div style="line-height:40px;font-size:18px;margin-right:5px">
                    {{item.balance}}
                </div>
            </div>
        </scroll>
        <scroll v-show="tabIndex === 2" class="_v-container_e show-text">
            <group class="detail-block">
                <cell-box v-for="(item, index) in tankerDetail" :key="item.name" class="detail-block-box vux-tap-active"
                          @click.native="$router.push({path:path,query:{tankerId: item.tankerId}})">
                    <div class="detail-cell-box">
                        <div class="detail-box-left" style="display:flex;width:calc(100% - 44px)">
                            <div class="detail-box-name"><i class="iconfont icon-jiayou1"
                                                            style="color:#44b549;font-size:36px"></i></div>
                            <div style="margin-left: 10px">
                                <div>{{item.name}}</div>
                                <div class="detail-left-time">2017-06-20 16:12:54</div>
                            </div>
                        </div>
                    </div>
                </cell-box>
            </group>
        </scroll>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {mapMutations} from 'vuex'
    import VUEX_NAME from '../store/constants.vue'
    import scroll from '../components/scroll.vue'
    import {PopupRadio} from 'vux'
    import {
        Bar,
        Checker,
        ScrollablePane,
        InputControl,
        Mask,
        Search,
    } from 'muka-ui'
    import {
        Checklist,
        Group,
        CellBox,
        XButton,
        GroupTitle,
        Swipeout,
        SwipeoutItem,
        SwipeoutButton,
        XInput,
        Confirm,
        Msg,
        Divider,
        InlineLoading,
        Popup,
        Tab,
        TabItem
    } from 'vux'
    import md5 from 'js-md5'

    export default {
        name: 'help',
        components: {
            Bar,
            Checklist,
            Group,
            CellBox,
            XButton,
            Checker,
            GroupTitle,
            Swipeout,
            SwipeoutItem,
            SwipeoutButton,
            Search,
            ScrollablePane,
            InputControl,
            XInput,
            'mu-mask': Mask,
            Confirm,
            Msg,
            Divider,
            InlineLoading,
            Popup,
            scroll,
            PopupRadio,
            Tab,
            TabItem
        },
        props: {
            path: {
                type: String,
                default: ''
            },
        },
        watch: {
            selected: function (val) {
                if (val) {
                    this.height = 'calc(100% - 135px)'
                } else {
                    this.height = 'calc(100% - 90px)'
                }
            },
            password: function (newVal) {
                let l = newVal.length
                let v = ''
                for (let i = 0; i < l; i++) {
                    v += '·'
                }
                this.value = v
                if (newVal.length === 6) {
                    this.handleInput()
                }
            },
            detail: function (newVal) {
                if (newVal.length === 0) {
                    this.bgFind['not-find'] = true
                } else {
                    this.bgFind['not-find'] = false
                }
            }
        },
        data: function () {
            return {
                tabIndex: 1,

                pulldown: true,
                which: 2,

                pageNumShow: '',
                pageSize: 20,
                total: 0,
                pageNum: 1,
                amount: '',
                searchText: '',
                tankerDetail: [],
            }
        },
        created: function () {
            this.cSearchCardList([])

            this.onItemTank()
        },
        computed: mapState([
            VUEX_NAME.searchCardList,
            VUEX_NAME.currentCardId
        ]),
        methods: {
            ...mapMutations([
                VUEX_NAME.cSearchCardList,
                VUEX_NAME.cCurrentCardId
            ]),

            //查询加油机
            onItemTank: function () {
                this.$ajax(
                    'mch/myTanker',
                    {
                        name: this.searchText
                    },
                    (content) => {
                        this.tankerDetail = content
                        this.buyI = true
                    })
            },

            searchFlow: function (cardId) {
                console.log(cardId)
                this.$router.push('icWaterSearch/' + cardId)
            },

            //获取分页数据
            getData: function (pageNum, done) {
                this.$ajax(
                    'card/myCardsPlus',
                    {
                        pageNum: pageNum,
                        pageSize: this.pageSize,
                        keywords: this.searchText
                    },
                    (content) => {
                        this.total = content.totalCount
                        this.cSearchCardList(this.searchCardList.concat(content.resultList))
                        if (done) {
                            done()
                        }
                    })
            },

            //搜索按钮
            handleIC: function (value) {
                if (value === "") {
                    this.$vux.toast.show({
                        text: '请输入搜索条件',
                        type: 'text',
                        position: 'middle'
                    })
                    return
                }
                this.cSearchCardList([])
                this.searchText = value
                this.getData(1)
            }
        }
    }

</script>

<style lang="less" scoped>
    .detail-block-box {
        border-bottom: 1px solid #D9D9D9;
    }

    .detail-cell-box {
        .detail-box-right {
            position: absolute;
            right: -15px;
            top: -10px;
            background-color: #44b549;
            color: white;
            line-height: 59px !important;
            width: 59px;
            text-align: center !important;
        }
        .no-select {
            color: #d1d1d1;
            background-color: inherit;
        }
    }
</style>
